<script setup lang='ts'>
defineOptions({ name: 'AppSportsBetSlipOddsSettingTable' })
defineEmits(['close'])

// 当前选择的赔率接受模式
const currentOddsSetting = ref('1')
const oddsSettingList = [
  { label: $t('sports_odds_setting_allow_all'), value: '1' },
  { label: $t('sports_odds_setting_allow_higher'), value: '2' },
  { label: $t('sports_odds_setting_allow_none'), value: '3' },
]
</script>

<template>
  <div class="odds-setting-table">
    <BaseIcon name="uni-close" class="close-icon" @click="$emit('close')" />
    <span class="mr-[4px]">{{ $t('sports_odds_setting') }}</span>
    <div class="setting-des">
      <span
        class="inline-flex items-center  justify-center w-[16px] h-[16px] text-[var(--color-text-white-0)] bg-[#ffffff1a] rounded-[50%]">
        <BaseIcon name="uni-qus" class="text-[10px]" style="--tg-base-icon-color:var(--color-text-white-0);" />
      </span>

      <!-- 说明 -->
      <div class="triangle"></div>
      <div class="des-text">
        Applicable also to washouts. Lower odds result in higher washouts
      </div>
    </div>
    <!-- 选项 -->
    <div class="rule-item" :class="{ active: rule.value === currentOddsSetting }"
      @click="currentOddsSetting = rule.value" v-for="rule in oddsSettingList" :key="rule.value">
      <span class="radio"></span>
      <span class="text">{{ rule.label }}</span>
    </div>
  </div>
</template>

<style lang='scss' scoped>
.odds-setting-table {
  left: 8px;
  color: var(--color-text-white-0);
  width: calc(100% - 16px);
  bottom: 8px;
  padding: 16px;
  z-index: 5;
  position: absolute;
  font-size: 14px;
  transform: translateY(0);
  background: var(--color-bg-black-4);
  box-sizing: border-box;
  font-weight: 600;
  line-height: 16px;
  border-radius: 12px;
  letter-spacing: 0.03em;

  .setting-des {
    display: inline-block;
    padding: 8px;
    margin: -8px;
    position: relative;
    cursor: pointer;

    &:hover {

      .triangle,
      .des-text {
        display: block;
      }
    }

    .triangle {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid black;
      position: absolute;
      bottom: -7px;
      left: 12px;
      z-index: 3;
      display: none;
    }

    .des-text {
      position: absolute;
      color: var(--color-text-white-0);
      background-color: var(--color-bg-black-0);
      font-size: 12px;
      font-weight: 500;
      line-height: normal;
      width: 180px;
      max-width: 180px;
      padding: 5px 10px;
      border-radius: 6px;
      bottom: -7px;
      left: -70px;
      transform: translateY(100%);
      z-index: 3;
      display: none;
    }
  }

  .close-icon {
    font-size: 24px;
    --tg-base-icon-color: var(--color-text-white-0);
    opacity: 0.3;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 8px;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        opacity: 1;
      }
    }
  }

  .rule-item {
    cursor: pointer;
    display: flex;
    font-size: 12px;
    margin-top: 16px;
    align-items: center;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.03em;

    .radio {
      width: 16px;
      height: 16px;
      z-index: 1;
      position: relative;
      margin-right: 8px;

      &::before,
      &::after {
        top: 0px;
        left: 0px;
        width: 16px;
        height: 16px;
        content: "";
        display: block;
        z-index: 2;
        position: absolute;
        box-sizing: border-box;
        transition: opacity 0.5s;
        border-radius: 50%;
      }

      &::before {
        border: 2px solid rgb(255, 255, 255);
        opacity: 0.5;
        background: none;
      }

      &::after {
        opacity: 0;
        background: rgb(36, 238, 137);
      }
    }

    .text {
      color: var(--color-text-white-0);
      line-height: 16px;
      letter-spacing: 0.03em;
      opacity: 0.7;
    }

    &.active {
      .text {
        opacity: 1;
      }

      .radio {
        &::before {
          opacity: 0;
        }

        &::after {
          opacity: 1;
        }
      }
    }
  }
}
</style>
